<template name="cartlist">
	<view class="page-box">
		<!-- 	<view class="cartlist" v-for="(item, index) in kalist2" :key="index">
			<view class="cartlisttxt">
				<text>{{ index + 1 }}.</text>
			</view>
			<view class="cartlisttxt">
				<view>
					<text>{{ $t('ucarts.卡号') }}</text>
					<text>{{ item.kahao }}</text>
				</view>
				<view>
					<text>{{ $t('ucarts.卡密') }}</text>
					<text>{{ item.kami }}</text>
				</view>
			</view>

			<view class="onoff">
				<switch style="transform: scale(0.6,0.6)" :disabled="item.dischecks" :data-index="index" :checked="item.kchetrue" @change="klistchange" color="#0bd34e" />
			</view>
			<view class="cartlisttxt">
				<text class="grey">{{ item.ktime}}</text>
			</view>
			<view class="cartlisttxt">
				<text class="grenntext" v-if="item.kstatus == 0">{{ $t('ucarts.可销售') }}</text>
			</view>
			<view class="cartlisttxt">
				<text class="grenntext" v-if="item.kstatus == 1">{{ $t('ucarts.未使用') }}</text>
			</view>
			<view class="cartlisttxt">
				<text class="redtext" v-if="item.kstatus == 2">{{ $t('ucarts.已使用') }}</text>
			</view>
			<view class="cartlisttxt">
				<text class="redtext" v-if="item.kstatus == 3">{{ $t('ucarts.禁用') }}</text>
			</view>
			<view class="cartlisttxt" @click="copyka('卡号：' + item.kahao + ' 卡密：' + item.kami)">
				<text class="font-35">{{ $t('ucarts.复制') }}</text>
			</view>
		</view> -->

		<view class="cartlist " v-for="(item, index) in kalist2" :class=" item.checks==true ? 'cartlisted' :''"
			:key="index">
			<view class="cartlist-left">
				<view class="cartlist-left-num ">
					<text>卡号</text>
					<text class="text" style="margin-left: 30rpx;">{{ item.kahao }}</text>
				</view>
				<view class="cartlist-left-password">
					<text>卡密</text>
					<text class="text" style="margin-left: 30rpx;">{{ item.kami }}</text>
				</view>
			
				<view v-if="item.kstatus == 2" class="cartlist-left-datetime">
					<text>激活日期</text>
					<text class="text" style="margin-left: 30rpx;">{{ item.kxtime }}</text>
				</view>
				<view v-else class="cartlist-left-datetime">
					<text>购卡日期</text>
					<text class="text" style="margin-left: 30rpx;">{{ item.ktime }}</text>
				</view>

			</view>
			<view class="cartlisttxt ">
				<text class="green" v-if="item.kstatus == 0">可销售</text>
			</view>
			<view class="cartlisttxt ">
				<text class="blue" v-if="item.kstatus == 1">未使用</text>
			</view>
			<view class="cartlisttxt">
				<text class="red" v-if="item.kstatus == 2">已使用</text>
			</view>
			<view class="cartlisttxt">
				<text class="red" v-if="item.kstatus == 3">禁用</text>
			</view>
			<view class="cartlist-right">
				<u-checkbox-group class="check">
					<u-checkbox v-model="item.checks" active-color="#0DA0FF" shape="circle"
						@change="changeradio($event,item,index)"></u-checkbox>
				</u-checkbox-group>
				<view class="flag">
					<view class="flag-text">开关</view>
					<view class="flag-switch">
						<switch style="transform: scale(0.8,0.8)" :disabled="item.dischecks" :data-index="index"
							:checked="item.kchetrue" @change="klistchange" color="#0DA0FF " />
					</view>
				</view>
				<view class="copy" @click="copyka('卡号：' + item.kahao + ' 卡密：' + item.kami)">
					复制
				</view>
			</view>
		</view>
		<view class="bos"></view>
	</view>
</template>

<script>
	//接口
	import {
		//wxlogin_api, //微信登陆接口
		//applelogin_api, //苹果一键登录接口
		jihuo_api, //卡号卡密撤回接口
		kaaction_api //卡号卡密激活
	} from '@/api/index';
	export default {
		name: 'cartlist',
		// 组件属性
		props: ['kalist', 'cattab', 'current'],
		data() {
			return {
				kalist2: [],
				chcktrue: true,
				chckfalse: false,
			};
		},
		created() {
			// this.kalist2 = this.kalist
		},
		watch: {
			kalist: {
				handler(newVal, oldVal) {
					this.kalist2 = newVal
					this.$emit("childClicks", this.kalist2)
				},
				deep: true,
				immediate: false
			}
		},
		methods: {
			changeradio(e, item, index) {
				// console.log(e,item.checks)
				// return
				// console.log(this.kalist2)
				// console.log(this.kalist2,this.cattab,this.current).
				// let numl = 0
				// this.kalist2.forEach((item, index) => {
				// 	if (item.checks == true) {
				// 		numl += 1
				// 	}

				// })
				this.$emit("childClick", e, item, this.kalist2)
				// this.$forceUpdate()
				// let flag = false 
				//    this.kalist2.forEach((item,index)=>{
				//    item.checks ? flag = true :flag = false
				// })

				// if(flag){
				// 	// console.log("已全选")
				// 	// console.log(this.cattab,this.current)
				// 	this.$emit("childClick",'123465')
				// }else{
				// 	 this.$emit("childClick","789456")
				// 	console.log("未全选")
				// }
			},
			klistchange(e) {
				var that = this;
				console.log(e);

				var index = e.target.dataset.index;
				var loaditem = that.kalist2[index];
				if (loaditem.kstatus == 3) {
					uni.showModal({
						title: '提示',
						content: '此卡已禁用，无法操作',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
								that.kalist2[index].kchetrue = true
								console.log(that.kalist2[index].kchetrue)
								that.$forceUpdate()
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return false;
				}
				if (loaditem.kstatus == 2) {
					that.kalist2[index].kchetrue = true;
					uni.showModal({
						title: '提示',
						content: '此卡已销售，用户已激活，无法改变状态',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return false;
				}
				if (loaditem.kstatus == 0) {
					that.https({
						url: kaaction_api,
						method: 'POST',
						header: {
							'content-type': 'application/json'
						},
						data: {
							kahao: loaditem.kahao
						},
						success: res => {
							console.log(res);
							//result_code:0
							//激活时:-1 用户没有登录，-2 用户已禁用，-3卡号或卡蜜错误，-4卡号没有销售，-5卡号已经激活不可重复使用，-6卡号被禁用，-7 其他错误,0 成功
							if (res.result_code == '0') {
								loaditem.kstatus = 1;
								loaditem.kchetrue = true;
								// uni.showModal({
								// 	title: '提示',
								// 	content: '此卡设置销售状态成功',
								// 	success: function(res) {
								// 		if (res.confirm) {
								// 			console.log('用户点击确定');
								// 		} else if (res.cancel) {
								// 			console.log('用户点击取消');
								// 		}
								// 	}
								// });
							} else {
								loaditem.kchetrue = false;
								// uni.showModal({
								// 	title: '提示',
								// 	content: '此卡设置销售状态失败',
								// 	success: function(res) {
								// 		if (res.confirm) {
								// 			console.log('用户点击确定');
								// 		} else if (res.cancel) {
								// 			console.log('用户点击取消');
								// 		}
								// 	}
								// });
							}
						},
						fail: err => {
							console.log(err);
							// uni.showModal({
							// 	title: '错误提示',
							// 	content: err,
							// 	success: function(res) {
							// 		if (res.confirm) {
							// 			console.log('用户点击确定');
							// 		} else if (res.cancel) {
							// 			console.log('用户点击取消');
							// 		}
							// 	}
							// });
						}
					});
				} else {
					that.https({
						url: jihuo_api,
						method: 'POST',
						header: {
							'content-type': 'application/json'
						},
						data: {
							kahao: loaditem.kahao,
							kami: loaditem.kami,
							type: 1 //1 撤销 0激活
						},
						success: res => {
							console.log(res);
							//result_code:0
							//激活时:-1 用户没有登录，-2 用户已禁用，-3卡号或卡蜜错误，-4卡号没有销售，-5卡号已经激活不可重复使用，-6卡号被禁用，-7 其他错误,0 成功
							if (res.result_code == -1) {
								//用户没有登录,让他微信登录
								uni.showModal({
									title: that.$t('jihuo.提示'),
									content: that.$t('jihuo.卡号不存在'),
									success: function(res) {
										if (res.confirm) {
											console.log('用户点击确定');
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								});
								return false;
							}
							if (res.result_code == -2) {
								//用户已禁用
								uni.showModal({
									title: that.$t('jihuo.提示'),
									content: that.$t('jihuo.此卡已激活'),
									success: function(res) {
										if (res.confirm) {
											console.log('用户点击确定');
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								});
								return false;
							}
							if (res.result_code == -3) {
								//卡号或卡密错误
								uni.showModal({
									title: that.$t('jihuo.提示'),
									content: that.$t('jihuo.卡号被禁用'),
									success: function(res) {
										if (res.confirm) {
											console.log('用户点击确定');
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								});
								return false;
							}

							if (res.result_code == 0) {
								//成功
								loaditem.kstatus = 0;
								loaditem.kchetrue = false;
								uni.showModal({
									title: that.$t('jihuo.提示'),
									content: that.$t('jihuo.销售状态已撤回'),
									success: function(res) {}
								});
							}
						},
						fail: err => {
							console.log(err);
							// uni.showModal({
							// 	title: '错误提示',
							// 	content: err,
							// 	success: function(res) {
							// 		if (res.confirm) {
							// 			console.log('用户点击确定');
							// 		} else if (res.cancel) {
							// 			console.log('用户点击取消');
							// 		}
							// 	}
							// });
						}
					});
				}
			},
			copyka(value) {
				
				var that = this;
				let sum = 0
				let valueStr = ''
				that.kalist2.forEach((item, index) => {
					if (item.checks) {
						valueStr += `卡号: ${item.kahao}卡密: ${item.kami}  `
						sum += 1
					}
				})
				if (valueStr == '') {
					valueStr = value
					sum = 1
				}
				console.log("复制内容", valueStr)
				// return
				uni.setClipboardData({
					data: valueStr, //要被复制的内容
					success: () => {
						//复制成功的回调函数
						uni.showToast({
							//提示
							title: sum + '张卡复制成功'
						});
					}
				});
			},
			schange(val) {
				var that = this;
				console.log('kali-st=', that.kalist2);
				let arr = val.split('-');
				console.log(arr, 'arr');
				let id = arr[0];
				let katype = arr[1];
				let kamitext = arr[2];
				let truefalse = arr[3];
				let index = arr[4];
				console.log("katype", katype);
				if (truefalse == 3) {
					that.kalist2[index].kchetrue = false;
					uni.showModal({
						title: '提示',
						content: '此卡已禁用，无法操作',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return false;
				}
				if (truefalse == 2) {
					that.kalist2[index].kchetrue = true;
					uni.showModal({
						title: '提示',
						content: '此卡已销售，用户已激活，无法改变状态',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return false;
				}

				//两种接口都调用！  状态改为已销售状态
				if (katype == 1) {
					that.https({
						url: kaaction_api,
						method: 'POST',
						header: {
							'content-type': 'application/json'
						},
						data: {
							kahao: id
						},
						success: res => {
							console.log(res);
							//result_code:0
							//激活时:-1 用户没有登录，-2 用户已禁用，-3卡号或卡蜜错误，-4卡号没有销售，-5卡号已经激活不可重复使用，-6卡号被禁用，-7 其他错误,0 成功
							if (res.result_code == '0') {

								uni.showModal({
									title: '提示',
									content: '此卡设置销售状态成功',
									success: function(res) {
										that.kalist2[index].kstatus = 1;
										that.kalist2[index].kchetrue = true;
										if (res.confirm) {
											console.log('用户点击确定');
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								});
							} else {
								that.kalist2[index].kchetrue = false;
								uni.showModal({
									title: '提示',
									content: '此卡设置销售状态失败',
									success: function(res) {
										if (res.confirm) {
											console.log('用户点击确定');
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								});
							}
							// "result_msg": "",
							// "jieshuriqi": "1643740447000",
							// "jiehuofangshi": "2",
							// "userstatus": "3",
							// "dailijibie": "0",
							// "result_code": "0",
							// "kaishiriqi": "1641913059000"

							// result_msg:消息
							// kaishiriqi;//会员开始日期时间戳
							// jieshuriqi;//会员结束日期时间戳
							// userstatus;//-3其他情况,-2,到期，-1 禁用,0-不是会员，1-普通会员，2-高级会员，3代理
							// jihuofangshi;//0-卡号卡蜜激活,1-直接购买，2-成为代理自动激活
							// dailijibie;//代理级别
						},
						fail: err => {
							console.log(err);
						}
					});
				} else {
					//已销售状态改成未销售状态
					that.https({
						url: jihuo_api,
						method: 'POST',
						header: {
							'content-type': 'application/json'
						},
						data: {
							kahao: id,
							kami: kamitext,
							type: 1 //1 撤销 0激活
						},
						success: res => {
							console.log(res);
							//result_code:0
							//激活时:-1 用户没有登录，-2 用户已禁用，-3卡号或卡蜜错误，-4卡号没有销售，-5卡号已经激活不可重复使用，-6卡号被禁用，-7 其他错误,0 成功
							if (res.result_code == -1) {
								//用户没有登录,让他微信登录
								uni.showModal({
									title: that.$t('jihuo.提示'),
									content: that.$t('jihuo.卡号不存在'),
									success: function(res) {
										if (res.confirm) {
											console.log('用户点击确定');
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								});
								return false;
							}
							if (res.result_code == -2) {
								//用户已禁用
								uni.showModal({
									title: that.$t('jihuo.提示'),
									content: that.$t('jihuo.此卡已激活'),
									success: function(res) {
										if (res.confirm) {
											console.log('用户点击确定');
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								});
								return false;
							}
							if (res.result_code == -3) {
								//卡号或卡密错误
								uni.showModal({
									title: that.$t('jihuo.提示'),
									content: that.$t('jihuo.卡号被禁用'),
									success: function(res) {
										if (res.confirm) {
											console.log('用户点击确定');
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								});
								return false;
							}

							if (res.result_code == 0) {
								//成功

								uni.showModal({
									title: that.$t('jihuo.提示'),
									content: that.$t('jihuo.销售状态已撤回'),
									success: function(res) {
										that.kalist2[index].kstatus = 0;
									}
								});
							}
							//激活时:-1 用户没有登录，-2 用户已禁用，-3卡号或卡蜜错误，-4卡号没有销售，-5卡号已经激活不可重复使用，-6卡号被禁用，-7 其他错误,0 成功

							// "result_msg": "",
							// "jieshuriqi": "1643740447000",
							// "jiehuofangshi": "2",
							// "userstatus": "3",
							// "dailijibie": "0",
							// "result_code": "0",
							// "kaishiriqi": "1641913059000"

							// result_msg:消息
							// kaishiriqi;//会员开始日期时间戳
							// jieshuriqi;//会员结束日期时间戳
							// userstatus;//-3其他情况,-2,到期，-1 禁用,0-不是会员，1-普通会员，2-高级会员，3代理
							// jihuofangshi;//0-卡号卡蜜激活,1-直接购买，2-成为代理自动激活
							// dailijibie;//代理级别
						},
						fail: err => {
							console.log(err);
						}
					});
				}
				//明天写完整的

				// let id = arr[0];
				// let status = arr[1];
			}
		}
	};
</script>

<style scoped lang="scss">
	.page-box {
		padding-bottom: 100rpx;
	}

	.bos {
		width: 750rpx;
		height: 40rpx;
	}

	.cartlist {
		margin-top: 20rpx;
		width: 690rpx;
		height: 264rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
		border: 2rpx solid #EFEFEF;
		margin: 20rpx auto;
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		position: relative;

		.cartlist-left {
			// width: 367rpx;
			height: 204rpx;
			// background-color: pink;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #AAAAAA;
			line-height: 33rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.text {
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #2B2B2B;
				line-height: 33rpx;
			}

		}

		.cartlisttxt {
			width: 120rpx;
			height: 40rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			opacity: 1;
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #52C41A;
			line-height: 34rpx;
			position: absolute;
			top: 30rpx;
			left: 228rpx;
			text-align: center;
			display: inline-block;
		}

		.green {
			width: 100rpx;
			height: 34rpx;
			display: inline-block;
			background: #EFFFE8;
			color: #52C41A;
		}

		.blue {
			width: 100rpx;
			height: 34rpx;
			display: inline-block;
			background: #EEF8FF;
			color: #0DA0FF;
		}

		.red {
			width: 100rpx;
			height: 34rpx;
			display: inline-block;
			background: #FFF3F3;
			color: #FF4D4F;
		}

		.cartlist-right {
			width: 180rpx;
			height: 204rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.check {
				margin-left: 100rpx;
			}

			.flag {
				display: flex;
				flex-direction: row;
				align-items: center;

				.flag-text {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #AAAAAA;
					line-height: 33rpx;
					text-align: center;
					display: inline-block;
				}

				.flag-switch {}
			}

			.copy {
				width: 137rpx;
				height: 45rpx;
				background: #FFFFFF;
				border-radius: 23rpx 23rpx 23rpx 23rpx;
				opacity: 1;
				border: 2rpx solid #0DA0FF;
				font-size: 26rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #0DA0FF;
				line-height: 45rpx;
				text-align: center;
			}
		}
	}

	.cartlisted {
		width: 690rpx;
		height: 264rpx;
		background-image: url('../../static/images/cartbg.png');
		background-size: 100% 100%;
	}



	.onoff {
		display: inline-block;
	}
</style>